<template>
	<el-scrollbar>
		<el-menu
			:default-active="defaultActive"
			:collapse="isCollapse"
			:unique-opened="uniqueOpened"
			:collapse-transition="false"
			background-color="transparent"
			mode="vertical"
			router
		>
      <menu-item
        v-for="menu in routerStore.routes"
        :key="menu.path"
        :menu="menu"
      ></menu-item>
		</el-menu>
	</el-scrollbar>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import MenuItem from './MenuItem.vue';

const routerStore = useStore.routerStore();
const appStore = useStore.appStore();
const { sidebarOpened, theme }: any = storeToRefs(appStore);

const formatMenuRoutes = (routes: any, localeKey: string) => {
	return routes.forEach((item: any) => {
		if (item.children && item.children.length > 0) {
			item.children = formatMenuRoutes(item.children, localeKey);
			return item;
		} else {
			item.meta[localeKey] && (item.meta.title = item.meta[localeKey]);
			return item;
		}
	})
}

const route = useRoute();
const defaultActive = computed(() => {
	const { path } = route;
	return path;
})

const isCollapse = computed(() => {
	return !sidebarOpened.value;
})

const uniqueOpened = computed(() => {
	return theme.value.uniqueOpened;
})
</script>
